<template>
  <MessageBubble :isMine="isMine">
     <!-- el-image在IE下会自动加上用于兼容object-fit的类，该类的样式在没设置图片宽高是会 GG -->
    <img class="image-element" v-lazy="imageUrl" />
    <el-progress
      v-if="showProgressBar"
      :percentage="percentage"
      :color="percentage => (percentage === 100 ? '#67c23a' : '#409eff')"
    />
  </MessageBubble>  
</template>

<script>
import MessageBubble from '../MessageBubble';
export default {
  name: 'ImageElement',
  props: {
    message: {
      type: Object,
      required: true
    },
    isMine: {
      type: Boolean
    }
  },
  components: {
    MessageBubble
  },
  computed: {
    imageUrl() {
      const url = this.message.payload.imageInfoArray[0].url;
      if (typeof url !== 'string') {
        return '';
      }
      return url.slice(0, 2) === '//' ? `https:${url}` : url;
    },
    showProgressBar() {
      return this.$parent.message.status === 'unSend';
    },
    percentage() {
      return Math.floor((this.$parent.message.progress || 0) * 100);
    }
  }
}
</script>

<style scoped>
.image-element{
  max-width:250px;
}
</style>